<template>
  <div class="box">
    <div class="title">助康网·中医中药</div>
    <div class="center conter_detail">
      <div class="content_left">
        <div class="content_left_title">
          <div>医</div>
          <div>院</div>
          <div>概</div>
          <div>括</div>
        </div>
        <div v-for="(item, index) in generaliza" :key="index">
          <!-- img -->
          <div class="left_banner">
            <img :src="item.thumb" />
          </div>
          <!-- text -->
          <div class="content_text">
            <P>
              {{ item.content }}
            </P>
            <p class="cont_left_more">
              <router-link :to="{ name: 'Hospital', params: { id: item.id } }"
                class="link_more"
                >查看更多&gt;&gt;</router-link
              >
            </p>
          </div>
        </div>
      </div>
        <!-- right -->
        <div class="content_right">
          <div class="content_right_title">
            <div class="right_title_div">
              <div>医</div>
              <div>讯</div>
              <div>快</div>
              <div>报</div>
            </div>
            <div class="right_title_more">
              <div class="content_right_more">
                <router-link to="/hosletter" class="cont_right_link">
                  查看更多
                </router-link>
              </div>
            </div>
          </div>
          <!--  -->
          <div
            class="content_right_div"
            v-for="(item, index) in list"
            :key="index"
          >
            <router-link
              :to="{ path: '/Hosletter_details', query: { id: item.id } }"
            >
              <div class="content_right_option">
                <div class="right_time">
                  <span>{{ year[index] }}</span>
                  <span>{{ month[index] }}月</span>
                  <span>{{ day[index] }}</span>
                </div>
                <div>
                  <p class="new_title">{{ item.title }}</p>
                  <P class="new_details">
                    {{ item.content }}
                  </P>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      generaliza: [],
      year: [],
      month: [],
      day: [],
    };
  },
  created() {
    axios.get("/complex/yixun").then((res) => {
      this.list = res.data.data;
      for (var i = 0; i < res.data.data.length; i++) {
        this.year[i] = res.data.data[i].ctime.substring(0, 4);
        this.month[i] = res.data.data[i].ctime.substring(5, 7);
        this.day[i] = res.data.data[i].ctime.substring(8, 10);
        var month = this.month[i];
        if (month == "12") {
          this.month[i] = "十二";
        } else if (month == 11) {
          this.month[i] = "十一";
        } else if (month == 10) {
          this.month[i] = "十";
        } else if (month == "09") {
          this.month[i] = "九月";
        } else if (month == "08") {
          this.month[i] = "八";
        } else if (month == "07") {
          this.month[i] = "七";
        } else if (month == "06") {
          this.month[i] = "六";
        } else if (month == "05") {
          this.month[i] = "五";
        } else if (month == "04") {
          this.month[i] = "四";
        } else if (month == "03") {
          this.month[i] = "三";
        } else if (month == "02") {
          this.month[i] = "二";
        } else if (month == "01") {
          this.month[i] = "一";
        }
      }
    });
    axios.get("/index/yiyuan").then((res) => {
      this.generaliza = res.data.data;
    });
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  background-color: #fce7d6;
  padding-top: 50px;
  padding-bottom: 100px;
}
.title {
  text-align: center;
  font-family: "楷体";
  color: #7f230f;
  font-size: 60px;
  padding-bottom: 50px;
}
.conter_detail {
  background-color: #fff4ee;
  display: flex;
  justify-content: space-around;
  width: 1572px;
  padding: 50px 0;
  border-radius: 30px;
}
.content_left {
  width: 600px;
}
.content_left_title {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 30px;
}
.content_left_title div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-right: 10px;
}
.left_banner img {
  width: 600px;
  height: 351px;
}
.content_text {
  font-size: 18px;
  margin-top: 50px;
}
.content_text p {
  text-indent: 2rem;
}
.cont_left_more {
  text-align: right;
  margin-top: 30px;
}
.link_more {
  color: #a40100;
  font-size: 16px;
}
/* 右边 */
.content_right {
  width: 846px;
}
.content_right_title {
  display: flex;
  justify-content: space-between;
}
.right_title_div {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 30px;
}
.right_title_div div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-left: 10px;
}
.content_right_more {
  background-color: #a40100;
  padding: 10px 20px;
  white-space: nowrap;
  border-radius: 25px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 20px;
}
.cont_right_link {
  color: white;
}
.content_right_div {
  height: 132px;
  width: 832px;
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}
.content_right_option {
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  border: 3px #882e13 solid;
  border-radius: 10px;
  width: 800px;
  transition: all 0.1s;
  position: absolute;
  right: 0;
}
.right_time {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin-right: 60px;
  text-align: center;
  background-color: #d06464;
  color: white;
  font-size: 20px;
  padding: 20px 0;
}
.content_right_option:hover {
  width: 846px;
  height: 140px;
}
.new_title {
  font-size: 20px;
  font-weight: 600;
  color: #ac0001;
  margin-top: 10px;
}
.new_details {
  color: gray;
  margin-top: 10px;
}
.content_right_option:hover .right_time {
  width: 250px;
  background-color: #9e290b;
}
.content_right_option:hover .new_title {
  font-size: 23px;
}
.content_right_option:hover .new_details {
  font-size: 18px;
}
</style>
